<template>
  <!-- 订单详情 -->
  <view class="container">
    <view class="contain_top">
     <view class="top_status">
        <image
          class="status_img"
          :src="
            !orderDetail.paid ||
            (orderDetail.paid && orderDetail.status == 0) ||
            (orderDetail.paid && orderDetail.status == 1)
              ? 'https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/nywx/detailhexiao.png'
              : 'https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/nywx/detailsucess.png'
          "
          mode=""
        ></image>

        <text>{{
          orderDetail.status == 4 ? "订单已关闭" : returnStatusName(orderDetail)
        }}</text>
      </view>
      <view class="top_first">
        <text
          v-if="
            orderDetail.paid &&
            orderDetail.status == 0 &&
            orderDetail.shippingType == 2
          "
          >前往商家使用时，请出示二维码</text
        >
      </view>

      <view
        v-if="
          orderDetail.paid &&
          orderDetail.status == 0 &&
          orderDetail.shippingType == 2
        "
        class="top_code"
      >
        <image
          :showLoading="true"
          :src="codeImg"
          style="width: 360rpx; height: 360rpx; border-radius: 10rpx"
        >
        </image>
      </view>
    </view>
    <view
      v-if="!orderDetail.paid && orderDetail.shippingType == 1"
      class="contain_public"
    >
      <view class="first_title"> 收货信息 </view>
      <view>
        <text>{{ orderDetail.realName || "" }}</text>
        <text class="user_phone">{{ orderDetail.userPhone }}</text>
      </view>
      <view class="first_adress">
        {{ orderDetail.userAddress || "" }}
      </view>
    </view>

    <view class="contain_public contain_third">
      <view class="third_title" v-if="orderDetail">
        共{{
          orderDetail.orderInfoList ? orderDetail.orderInfoList.length : 0
        }}件商品
      </view>
      <view
        class="third_shop"
        v-for="(item, index) in orderDetail.orderInfoList"
        :key="index"
      >
        <view>
          <image
            :showLoading="true"
            :src="item.image"
            style="width: 160rpx; height: 160rpx; border-radius: 8rpx"
          >
          </image>
        </view>
        <view class="shop_box">
          <view class="shop_name">
            {{ item.storeName || "" }}
          </view>
          <view class="shop_bottom">
            <view class="shop_bottom_l">
              <text class="shop_money">
                ￥<text style="font-size: 34rpx">{{
                  dealPrice(item.price, 1)
                }}</text
                >{{ dealPrice(item.price, 2) }}
              </text>
            </view>
            <view class="shop_bottom_r"> x{{ item.cartNum || "" }} </view>
          </view>
        </view>
      </view>
    </view>

    <view class="contain_public contain_four">
      <view class="four_title"> {{storeDetail.name}} </view>
      <view class="four_item" @tap="openLocation">
        <text class="four_item_l">门店地址</text>
        <view class="four_item_r">
          <text style="margin-right: 14rpx"
            >{{ storeDetail.address || ""
            }}{{ storeDetail.area || "" }}</text
          >
          <image
            class="four_r_img"
            src="https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/nywx/location.svg"
            mode=""
          ></image>
        </view>
      </view>
      <view class="four_item" @tap="makePhone">
        <text class="four_item_l">门店电话</text>
        <view class="four_item_r">
          <text style="margin-right: 14rpx">{{ storeDetail.phone || "" }}</text>
          <image
            class="four_r_img"
            src="https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/nywx/phone.svg"
            mode=""
          ></image>
        </view>
      </view>
      <view class="four_item">
        <text class="four_item_l">营业时间</text>
        <view class="four_item_r">
          {{ storeDetail.openTime }}
        </view>
      </view>
    </view>
    <view class="contain_public contain_five">
      <view class="five_item">
        <view class="five_item_l"> 订单总价 </view>
        <view class="five_item_r"> ¥{{ orderDetail.totalPrice || "" }} </view>
      </view>
      <view v-if="orderDetail.shippingType == 1" class="five_item">
        <view class="five_item_l"> 快递费用 </view>
        <view class="five_item_r five_item_r3">
          {{ orderDetail.payPostage == 0 ? "免运费" : orderDetail.payPostage }}
        </view>
      </view>
      <view v-if="orderDetail.rightName" class="five_item">
        <view class="five_item_l"> 会员优惠 </view>
        <view class="five_item_r five_item_r3">
          -￥{{ orderDetail.rightProTotalFee || "" }}
        </view>
      </view>
      <view v-if="orderDetail.paid" class="five_item">
        <view class="five_item_l"> 实付金额 </view>
        <view class="five_item_r five_item_r3">
          ￥{{ orderDetail.payPrice || "" }}
        </view>
      </view>
    </view>
    <view class="contain_public contain_six">
      <view class="six_item" @tap="copyOrder">
        <view class="six_item_l"> 订单编号 </view>
        <view class="six_item_r">
          <text>{{ orderDetail.orderId || "" }}</text>
          <text class="six_copy">复制</text>
        </view>
      </view>
      <view
        v-if="orderDetail.deliveryId"
        class="six_item"
        @tap="goPhysical(orderDetail.deliveryId)"
      >
        <view class="six_item_l"> 物流编号 </view>
        <view class="six_item_r six_item_r2">
          {{ orderDetail.deliveryId || "" }}
          <text class="six_copy">查询</text>
        </view>
      </view>
      <view class="six_item">
        <view class="six_item_l"> 创建时间 </view>
        <view class="six_item_r">
          {{ orderDetail.createTime || "" }}
        </view>
      </view>
      <view v-if="orderDetail.paid" class="six_item">
        <view class="six_item_l"> 付款时间 </view>
        <view class="six_item_r">
          {{ orderDetail.payTime || "" }}
        </view>
      </view>
    </view>

    <view class="contain_bottom_fixed">
      <view
        v-if="!orderDetail.paid && orderDetail.status !== 4"
        class="contain_bottom_fixed2"
      >
        <view class="total_box">
          合计：<text class="total_money"
            >￥<text style="font-size: 40rpx">{{
              dealPrice(orderDetail.totalPrice, 1)
            }}</text
            >{{ dealPrice(orderDetail.totalPrice, 2) }}</text
          >
        </view>
        <view style="display: flex; text-align: end">
          <button class="btn_invite" @tap="cancelOrderShow">取消订单</button>
          <button class="btn_invite" @tap="goPayShow">去支付</button>
        </view>
      </view>
      <!-- check true代表管理员操作   shippingType 1 快递  2  美容   -->
      <!--  确认收货（物流收货、拼团收货）  核销  邀请好友拼团    -->
      <view
        v-if="
          orderDetail.paid &&
          orderDetail.status == 0 && 
          orderDetail.pinkId &&
          orderDetail.pinkStatus==1
        "
        class="contain_bottom_fixed3"
      >
        <button
          class="btn_invite"
          @tap="goPink(orderDetail.pinkId)"
        >
        邀请好友拼团
        </button>
      </view>
      <view
        v-if="
          orderDetail.paid &&
          orderDetail.status == 1 &&
          orderDetail.shippingType == 1 ||
          orderDetail.pinkId && 
          orderDetail.pinkStatus==1
        "
        class="contain_bottom_fixed3"
      >
        <button class="btn_invite" @tap="queryGoodsShow">确认收货</button>
      </view>
      <view
        v-if="orderDetail.status == 0"
        class="contain_bottom_fixed3"
      >
        <button class="btn_invite" @tap="goCheck">去核销</button>
      </view>
    </view>
    <payment
      :payMode="payMode"
      :pay_close="pay_close"
      @onChangeFun="onChangeFun"
      :order_id="orderId"
      :totalPrice="orderDetail.totalPrice"
    ></payment>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getOrderDetail,
  postOrderCancelData,
  postOrderCodeData,
  queryOrderData,
} from "../../api/api.js";
import { dealPrice, uniCopy } from "@/utils/index.js";
import payment from "@/components/payment";
export default {
  computed: mapGetters(["userInfo"]),
  components: {
    payment,
  },
  data() {
    return {
      pay_close: false,
      payMode: [
        {
          name: "微信支付",
          value: "weixin",
          title: "微信快捷支付",
          img: "https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/nywx/weixinpay.svg",
        },
        {
          name: "余额支付",
          value: "yue",
          title: "可用余额:",
          img: "https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/nywx/yuepay.svg",
        },
      ],
      orderId: "",
      vCode: "",
      qrCodeValue: "", //核销进入参数
      orderDetail: {}, //订单详情
      storeDetail: {}, //门店信息
      storeTime1: "", //门店开始时间
      storeTime2: "", //门店结束时间

      ispayShow: false, //选择支付方式

      codeImg: "", //核销二维码
    };
  },
  onLoad(options) {
    if (options.orderId) {
      this.orderId = options.orderId;
      this.getOrderDetailFn(); //获取订单详情
    }
  },
  methods: {
    /**
     * 事件回调
     *
     */
    onChangeFun: function (e) {
      let opt = e;
      let action = opt.action || null;
      let value = opt.value != undefined ? opt.value : null;
      action && this[action] && this[action](value);
    },
    payClose() {
      this.$set(this, "pay_close", false);
    },
    pay_fail() {},
    pay_complete: function () {
      this.$set(this, "pay_close", false);
      this.getOrderDetailFn(); //获取订单详情
    },
    // 去参团页面；
    goPink(id) {
      uni.navigateTo({
        url: "/subpageC/combination_status/combination_status?id=" + id,
      });
    },
    copyOrder() {
      uniCopy({
        content: this.orderDetail.orderId,
        success: (res) => {
          uni.showToast({
            title: "订单号复制成功",
            icon: "none",
          });
        },
        error: (e) => {
          uni.showToast(e);
        },
      });
    },
    openLocation() {
      uni.openLocation({
        latitude: parseFloat(this.storeDetail.latitude),
        longitude: parseFloat(this.storeDetail.longitude),
        name: this.storeDetail.name,
        success: function () {
          console.log("success");
        },
        fail: function (res) {
          console.log(res);
        },
      });
    },
    makePhone() {
      uni.makePhoneCall({
        phoneNumber: this.storeDetail.phone,
      });
    },
    goPhysical(deliveryId) {
      // 查询物流
      wx.openEmbeddedMiniProgram({
        appId: "wx6885acbedba59c14",
        path: `pages/result/result?nu=${deliveryId}&com=&querysource=third_xcx`,
        envVersion: "release",
      });
    },
    returnStatusName(item) {
      let status = item.status;
      switch (status) {
        case 0:
          if (!item.paid) {
            return "待支付";
          }
          if (item.refundStatus == 1) return "退款申请中";
          if (item.refundStatus == 2) return "已退款";
          if (item.refundStatus == 3) return "退款中";
          if (item.pinkId && item.pinkId > 0) {
            if (item.pinkStatus == 1) {
              return "拼团进行中";
            }
            if (item.pinkStatus == 2) {
              return "拼团已完成，待发货";
            }
            if (item.pinkStatus == 3) {
              return "拼团已取消";
            }
          }
          if (item.shippingType == 1) {
            return "待发货";
          }
          if (item.shippingType == 2) {
            return "待核销";
          }
        case 1:
          if (item.shippingType == 1) {
            return "待收货";
          }
          if (item.shippingType == 2) {
            return "待核销";
          }
        case 2:
        case 3:
          return "已完成";
        case 4:
          return "已关闭";
      }
    },
    goCheck() {
      let that = this;
      uni.showModal({
        title: "确认核销",
        content: "确认要核销订单吗",
        success: function (res) {
          if (res.confirm) {
            appointmentUpdate(value).then((res) => {
              uni.showToast({
                title: "核销成功",
                icon: "none",
              });
            });
          }
        },
      });
    },

    returnStatus(item) {
      let status = item.status;
      console.log(status, "------");
      switch (status) {
        case 0:
          if (!item.paid) {
            return "待支付";
          }
          if (item.refundStatus == 1) return "退款申请中";
          if (item.refundStatus == 2) return "已退款";
          if (item.refundStatus == 3) return "退款中";
          if (item.shippingType == 1) {
            return "待发货";
          }
          if (item.shippingType == 2) {
            return "待核销";
          }
        case 1:
          if (item.shippingType == 1) {
            return "待收货";
          }
          if (item.shippingType == 2) {
            return "待核销";
          }
        case 2:
        case 3:
          return "已完成";
      }
    },
    // 处理价格
    dealPrice(v, n) {
      return dealPrice(v, n);
    },
    //获取订单详情
    getOrderDetailFn() {
      getOrderDetail(this.orderId)
        .then((res) => {
          this.orderDetail = res.data;
          this.storeDetail = res.data.orderInfoList[0].merchant
          this.getorderCode(); //转换核销二维码
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 取消订单
    cancelOrderShow() {
      let that = this;
      uni.showModal({
        content: "确定要取消订单嘛？？",
        confirmColor: "#E02828",
        success: function (res) {
          if (res.confirm) {
            that.cancelOrder();
          } else if (res.cancel) {
            return false;
          }
        },
      });
    },
    cancelOrder() {
      let data = {
        id: this.orderDetail.id,
      };
      postOrderCancelData(data)
        .then((res) => {
          uni.showToast({
            title: "订单取消成功",
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 300);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 确认收货
    queryGoodsShow() {
      let that = this;
      uni.showModal({
        title: "确认收货",
        content: "为保障权益，请收到货确认无误后，再确认收货",
        success: function (res) {
          if (res.confirm) {
            queryOrderData({
              id: that.orderDetail.id,
            })
              .then((res) => {
                uni.navigateBack();
              })
              .catch((err) => {});
          }
        },
      });
    },
    //转换核销二维码
    getorderCode() {
      let data = {
        height: 180,
        orderId: this.orderDetail.id + '',
        vCode: this.orderDetail.verifyCode,
        width: 180,
      };
      postOrderCodeData(data)
        .then((res) => {
          this.codeImg = res.data.code;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 支付
    goPayShow() {
      this.$set(this, "pay_close", true);
    },
  },
};
</script>
<style lang="scss">
.btn_invite {
  width: 100%;
    font-size: 26rpx;
    background: #DF4B43;
    color: #fff;
}
.pop {
  background: #fff;
  width: 670rpx;
}
.pop_top {
  display: flex;
  justify-content: space-between;
  padding: 26rpx 30rpx 34rpx;
  font-size: 30rpx;
  font-weight: 600;
}

.pop_body {
  padding: 0 30rpx;

  .pop_item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-top: 2rpx solid #ccc;

    .pop_img {
      width: 68rpx;
      height: 68rpx;
    }

    .pop_right {
      margin-left: 20rpx;

      .pop_item_name {
        font-size: 32rpx;
        color: #282828;
      }

      .pop_item_tip {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}
.container {
  padding: 0 30rpx 170rpx;

  .contain_top {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 0 50rpx;

    .top_status {
      display: flex;
      align-items: center;
      font-size: 24rpx;

      .status_img {
        width: 68rpx;
        height: 68rpx;
        margin-right: 20rpx;
      }
    }

    .top_first {
      font-size: 24rpx;
    }

    .top_code {
      display: flex;
      justify-content: center;
      margin-top: 50rpx;
    }
  }

  .contain_public {
    margin-bottom: 24rpx;
    padding: 20rpx 30rpx;
    border-radius: 18rpx;
    background-color: #fff;
    font-size: 26rpx;

    .first_title {
      position: relative;
      padding: 6rpx 0 24rpx;
      font-weight: 600;
      font-size: 30rpx;
    }

    .user_phone {
      margin-left: 18rpx;
      color: #525252;
    }

    .first_adress {
      margin: 18rpx 0 20rpx;
    }
  }

  .contain_third {
    .third_title {
      padding: 6rpx 0 4rpx;
      font-size: 30rpx;
      font-weight: 600;
    }

    .third_shop {
      display: flex;
      padding: 34rpx 0;

      .shop_box {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 18rpx;

        .shop_name {
          font-size: 26rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          letter-spacing: 0rpx;
        }

        .shop_bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .shop_bottom_l {
            .shop_money {
              letter-spacing: 0rpx;
              font-size: 24rpx;
              font-weight: 700;
              color: #ff443f;
            }

            .price_del {
              position: relative;
              letter-spacing: 0rpx;
              margin-left: 10rpx;
              font-size: 20rpx;
              color: #d9d9d9;

              &::after {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                right: 0;
                border-top: 1rpx solid #d9d9d9;
                transform: rotate(10deg);
              }
            }
          }

          .shop_bottom_r {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            font-weight: 700;
          }
        }
      }
    }
  }

  .contain_four {
    .four_title {
      padding: 6rpx 0 4rpx;
      font-size: 30rpx;
      font-weight: 600;
    }

    .four_item {
      display: flex;
      padding: 27rpx 0;
      font-size: 26rpx;

      .four_item_l {
        flex: 0 1 140rpx;
      }

      .four_item_r {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .four_r_img {
          width: 34rpx;
          height: 34rpx;
        }
      }
    }
  }

  .contain_five,
  .contain_six {
    padding: 20rpx 30rpx;
    font-size: 26rpx;

    .five_item,
    .six_item {
      display: flex;
      align-items: center;
      padding: 27rpx 0;

      .five_item_l,
      .six_item_l {
        flex: 0 1 140rpx;
      }

      .five_item_r,
      .six_item_r {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
      }

      .six_copy {
        margin-left: 12rpx;
        padding: 10rpx 16rpx;
        border-radius: 8rpx;
        background: #f5f5f5;
        font-size: 22rpx;
        color: #8d8d8d;
      }

      .five_item_r2 {
        .arrow_right {
          position: relative;
          padding-left: 20rpx;

          &::after {
            content: "";
            position: absolute;
            top: -6rpx;
            right: 0rpx;
            width: 14rpx;
            height: 14rpx;
            border-top: 2rpx solid rgba(0, 0, 0, 0.6);
            border-right: 2rpx solid rgba(0, 0, 0, 0.6);
            transform: rotate(45deg);
          }
        }
      }

      .five_item_r3 {
        color: #ff443f;
      }

      .six_item_r2 {
        padding-right: 34rpx;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          top: 12rpx;
          right: 10rpx;
          width: 11rpx;
          height: 11rpx;
          border-top: 2rpx solid rgba(0, 0, 0, 0.6);
          border-right: 2rpx solid rgba(0, 0, 0, 0.6);
          transform: rotate(45deg);
        }
      }
    }
  }

  .contain_bottom_fixed2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 26rpx 30rpx;

    .total_box {
      font-size: 24rpx;

      .total_money {
        letter-spacing: 0rpx;
        font-weight: 600;
        color: #ff443f;
      }
    }
  }

  .contain_bottom_fixed3 {
    display: flex;
    margin: 26rpx 30rpx;

    .fixed3_item {
      flex: 1;
      padding: 0 20rpx;
    }
  }
}
</style>
